<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>商品规格管理</title>
		<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
		<style>
			.color-preview {
				width: 24px;
				height: 24px;
				border-radius: 4px;
				display: inline-block;
				margin-right: 8px;
				border: 1px solid #e5e7eb;
			}

			.sku-table th {
				background-color: #f3f4f6;
				position: sticky;
				top: 0;
			}

			.fade-in {
				animation: fadeIn 0.3s ease-in-out;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(10px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
		<div class="container mx-auto px-4 py-8 max-w-6xl">
			<!-- 导航栏 -->
			<div class="flex border-b mb-6">
				<div class="px-4 py-2 font-medium text-gray-500">基础信息</div>
				<div class="px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600">商品规格</div>
				<div class="px-4 py-2 font-medium text-gray-500">支付信息</div>
				<div class="px-4 py-2 font-medium text-gray-500">物流信息</div>
				<div class="px-4 py-2 font-medium text-gray-500">售后服务</div>
			</div>

			<!-- 颜色分类模块 -->
			<div class="bg-white rounded-lg shadow p-6 mb-6">
				<h2 class="text-lg font-semibold mb-4">颜色分类</h2>
				<p class="text-sm text-gray-500 mb-4">选择标准颜色可增加搜索/导购机会，标准颜色还可填写颜色备注信息（偏深、偏亮等）！</p>

				<div id="color-container">
					<div class="color-item flex items-center mb-4 fade-in">
						<input type="text" class="border rounded px-3 py-2 w-40 mr-3" placeholder="颜色名称" value="测试1">
						<button class="upload-btn bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded text-sm mr-3">
							<i class="fas fa-image mr-1"></i>上传图片
						</button>
						<input type="text" class="border rounded px-3 py-2 flex-1" placeholder="备注（如偏深偏浅等）">
						<button class="remove-color text-red-500 ml-3">
							<i class="fas fa-times"></i>
						</button>
					</div>
				</div>

				<button id="add-color" class="text-blue-600 text-sm mt-2">
					<i class="fas fa-plus mr-1"></i>添加新颜色
				</button>
			</div>

			<!-- 尺码模块 -->
			<div class="bg-white rounded-lg shadow p-6 mb-6">
				<h2 class="text-lg font-semibold mb-4">尺码</h2>
				<p class="text-sm text-gray-500 mb-4">选择标准尺码可增加搜索/导购机会，标准尺码还可填写尺码备注信息（偏大、偏小等）！</p>

				<div class="flex flex-wrap gap-4 mb-4">
					<label class="inline-flex items-center">
						<input type="radio" name="size-type" class="form-radio" checked>
						<span class="ml-2">通用</span>
					</label>
					<label class="inline-flex items-center">
						<input type="radio" name="size-type" class="form-radio">
						<span class="ml-2">中国码</span>
					</label>
					<label class="inline-flex items-center">
						<input type="radio" name="size-type" class="form-radio">
						<span class="ml-2">英码</span>
					</label>
					<label class="inline-flex items-center">
						<input type="radio" name="size-type" class="form-radio">
						<span class="ml-2">美码</span>
					</label>
					<label class="inline-flex items-center">
						<input type="radio" name="size-type" class="form-radio">
						<span class="ml-2">均码</span>
					</label>
				</div>

				<div class="flex mb-4">
					<input type="text" id="custom-size" class="border rounded px-3 py-2 w-40 mr-3" placeholder="请输入自定义值">
					<button id="add-custom-size" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
						+添加
					</button>
				</div>

				<div id="size-container" class="mb-4">
					<div class="flex flex-wrap gap-3">
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">145/80A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">150/80A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">155/80A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">160/84A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">165/88A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">170/92A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">175/96A</span>
						</label>
						<label class="inline-flex items-center">
							<input type="checkbox" class="form-checkbox size-checkbox" checked>
							<span class="ml-2">175/100A</span>
						</label>
					</div>
				</div>

				<button class="text-blue-600 text-sm">
					<i class="fas fa-plus mr-1"></i>添加尺码-尺寸对照表
				</button>
			</div>

			<!-- 宝贝销售规格模块 -->
			<div class="bg-white rounded-lg shadow p-6">
				<h2 class="text-lg font-semibold mb-4">宝贝销售规格</h2>
				<p class="text-sm text-gray-500 mb-4">在标题栏中输入或选择内容可以进行筛选和批量填充</p>

				<div class="overflow-x-auto">
					<table class="min-w-full sku-table">
						<thead>
							<tr>
								<th class="px-4 py-2 text-left">颜色分类</th>
								<th class="px-4 py-2 text-left">尺码</th>
								<th class="px-4 py-2 text-left">价格（元）</th>
								<th class="px-4 py-2 text-left">数量（件）</th>
								<th class="px-4 py-2 text-left">商家编码</th>
								<th class="px-4 py-2 text-left">商品条形码</th>
							</tr>
						</thead>
						<tbody id="sku-container">
							<tr>
								<td class="border px-4 py-2">测试1</td>
								<td class="border px-4 py-2">150/80A</td>
								<td class="border px-4 py-2"><input type="number" class="w-20 border rounded px-2 py-1" value="0"></td>
								<td class="border px-4 py-2"><input type="number" class="w-20 border rounded px-2 py-1" value="0"></td>
								<td class="border px-4 py-2"><input type="text" class="w-32 border rounded px-2 py-1"></td>
								<td class="border px-4 py-2"><input type="text" class="w-32 border rounded px-2 py-1"></td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="mt-4">
					<button id="batch-fill" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded mr-3">
						批量填充
					</button>
					<button id="generate-sku" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
						生成SKU
					</button>
				</div>
			</div>
		</div>

		<script>
			var sku_data = [{
				name: "颜色",
				key: "color",
				list: [{
					title: "",
					mark: "",
					image: ""
				}]
			}]
			// 颜色管理功能
			document.getElementById('add-color').addEventListener('click', function() {
				const container = document.getElementById('color-container');
				const newItem = document.createElement('div');
				newItem.className = 'color-item flex items-center mb-4 fade-in';
				newItem.innerHTML = `
                <input type="text" class="border rounded px-3 py-2 w-40 mr-3" placeholder="颜色名称">
                <button class="upload-btn bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded text-sm mr-3">
                    <i class="fas fa-image mr-1"></i>上传图片
                </button>
                <input type="text" class="border rounded px-3 py-2 flex-1" placeholder="备注（如偏深偏浅等）">
                <button class="remove-color text-red-500 ml-3">
                    <i class="fas fa-times"></i>
                </button>
            `;
				container.appendChild(newItem);

				// 添加删除事件
				newItem.querySelector('.remove-color').addEventListener('click', function() {
					newItem.classList.add('opacity-0', 'transition-opacity', 'duration-300');
					setTimeout(() => {
						container.removeChild(newItem);
					}, 300);
				});
			});

			// 尺码管理功能
			document.getElementById('add-custom-size').addEventListener('click', function() {
				const customSize = document.getElementById('custom-size').value.trim();
				if (customSize) {
					const container = document.getElementById('size-container');
					const newSize = document.createElement('label');
					newSize.className = 'inline-flex items-center fade-in';
					newSize.innerHTML = `
                    <input type="checkbox" class="form-checkbox size-checkbox" checked>
                    <span class="ml-2">${customSize}</span>
                `;
					container.querySelector('.flex').appendChild(newSize);
					document.getElementById('custom-size').value = '';
				}
			});

			// 生成SKU功能
			document.getElementById('generate-sku').addEventListener('click', function() {
				const colors = Array.from(document.querySelectorAll('.color-item input[type="text"]:first-child'))
					.map(input => input.value.trim())
					.filter(Boolean);

				const sizes = Array.from(document.querySelectorAll('.size-checkbox:checked'))
					.map(checkbox => checkbox.nextElementSibling.textContent.trim());

				const skuContainer = document.getElementById('sku-container');
				skuContainer.innerHTML = '';

				colors.forEach(color => {
					sizes.forEach(size => {
						const row = document.createElement('tr');
						row.className = 'fade-in';
						row.innerHTML = `
                        <td class="border px-4 py-2">${color}</td>
                        <td class="border px-4 py-2">${size}</td>
                        <td class="border px-4 py-2"><input type="number" class="w-20 border rounded px-2 py-1" value="0"></td>
                        <td class="border px-4 py-2"><input type="number" class="w-20 border rounded px-2 py-1" value="0"></td>
                        <td class="border px-4 py-2"><input type="text" class="w-32 border rounded px-2 py-1"></td>
                        <td class="border px-4 py-2"><input type="text" class="w-32 border rounded px-2 py-1"></td>
                    `;
						skuContainer.appendChild(row);
					});
				});
			});

			// 批量填充功能
			document.getElementById('batch-fill').addEventListener('click', function() {
				alert('批量填充功能将在后续版本中实现');
			});
		</script>
	</body>
</html>